<template>
  <div>
<button @click="go">返回</button>
<div class="table-responsive">
  <table class="table table-striped">
		<thead>
			<tr>
				<th class="text-center">指数名称</th>
				<th class="text-center">指数代码</th>
				<th class="text-center">涨跌幅</th>
				<th class="text-center">开盘点位</th>
				<th class="text-center">昨日收盘点位</th>
				<th class="text-center">收盘点位</th>
				<th class="text-center">最高点位</th>
				<th class="text-center">最低点位</th>
				<th class="text-center">成交量(手)</th>
				<th class="text-center">成交金额（亿元）</th>
			</tr>
		</thead>
		<tbody>
			<tr v-for = "(item, index) in moreIndex" :index="index" :key="item.index">
				<td> {{item.name}} </td>
				<td> {{item.code}} </td>
				<td class="text-danger" v-if="item.change >= 0"> {{item.change}}% </td>
				<td class="text-success" v-else> {{item.change}}% </td>
				<td> {{item.open}} </td>
				<td> {{item.preclose}} </td>
				<td> {{item.close}} </td>
				<td> {{item.high}} </td>
				<td> {{item.low}} </td>
				<td> {{item.volume}} </td>
				<td> {{item.amount}} </td>
			</tr>
		</tbody>
	</table>
</div>

		<!-- foot -->
    <Footer/>

  </div>
</template>

<script>
import Footer from '../components/Footer.vue'

export default {
	components: {
    Footer
  },
  data () {
    return {
      moreIndex: []
    }
  },
  created() {
    this.axios.get(`${this.config.baseURL}:${this.config.port}/api/stock_index?id=more_index`).then((response) => {
      console.log('sdsdf', response.data.data)
      this.moreIndex = response.data.data
    })
  },
  methods: {
    go () {
      this.$router.push('/')
    },
  }  
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
